import React from 'react';
import { observer } from 'mobx-react';
import Input from '../../../../view/view-input';
import { ColumnProps } from '../../../../stores/mobxTable/table';
import { SelectNew } from 'antd';
import $ from "jquery";

const Option = SelectNew.Option;
interface Props {
    value?: number;
    propsChange: (propName: string, propValue: any) => void;
    getProps: (propsName?: string) => any;
    onChange: (string) => void;
    toReadonly: () => void;
    addonBefore?: ColumnProps;
}

@observer
export default class InputPopover extends React.Component<Props, any> {
    constructor(props) {
        super(props);
        const { column, row } = props;
        this.state = { hide: column && column.isHide && column.isHide(row) };
    }
    getTopWidth = () => {
        if (this.refs._container) {
            const closesttd = $(this.refs._container).closest('td');
            const offset: any = closesttd.offset();
            const offset1: any = closesttd.closest('table').offset();
            const width = Math.max(document.documentElement.clientWidth - offset.left - 20, 200);
            return {
                top: offset.top - offset1.top + 8,
                left: offset.left - offset1.left + 8,
                width
            }
        }
    }
    render() {
        const { addonBefore } = this.props;
        let selectBefore: any = null;
        if (addonBefore) {
            const { options = [], width } = addonBefore;
            selectBefore = (
                <SelectNew style={{ width }} onChange={(v) => {

                }}>
                    {
                        options.map(opt => (
                            <Option value={opt.key}>{opt.showname}</Option>
                        ))
                    }
                </SelectNew>
            );
        }
        return (
            <div style={{float:'left'}}>
                <span ref="_container">
                    {
                        <Input
                            value={this.props.value}
                            autoFocus={!selectBefore}
                            addonBefore={selectBefore}
                            onChange={(e) => { this.props.onChange(e.target.value) }}
                            style={{ position: 'absolute', top: 8, zIndex: 1000, ...this.getTopWidth() }}
                        />
                    }
                </span>
            </div>
        )
    }
}

